<template>
  <div>
    <activiti-design-vue @getBPMN="saveBPMN" ref="activitiDesignVue" :handleData="diagramData"></activiti-design-vue>
    <!--保存按钮-->
    <button class="saveButton" type="primary" size="medium" @click="downloadBpmn">导出BPMN</button>
    <a id="download"></a>
    <button class="setFile" type="primary" size="medium" @click="inputFile">部署</button>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "Dashboard",
    components: {
      activitiDesignVue: () => import('./components/activitiDesignVue')
    },
    data() {
      return {
        // 传给流程图的数据
        diagramData: {
          diagramXML: ''
        },
      };
    },
    created() {
      this.diagramData.diagramXML =
        '<?xml version="1.0" encoding="UTF-8"?>' +
        ' <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">' +
        '    <bpmn2:process id="process" isExecutable="true">' +
        '      <bpmn2:startEvent id="StartEvent_1"/>' +
        "    </bpmn2:process>" +
        '    <bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
        '      <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
        '        <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
        '          <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>' +
        "        </bpmndi:BPMNShape>" +
        "      </bpmndi:BPMNPlane>" +
        "    </bpmndi:BPMNDiagram>" +
        "  </bpmn2:definitions>";
    },
    mounted() {
      this.bpmnModeler = new BpmnModeler({
          container: canvas,
          propertiesPanel: {
            parent: "#js-properties-panel",
          },
          additionalModules: [
            propertiesPanelModule,
            propertiesProviderModule,
            customControlsModule,
            customTranslateModule,
          ],
          moddleExtensions: {
            activiti: activitiModdleDescriptor,
          },
        });
    },
    methods: {
      saveBPMN(xml) {
        // console.log(xml, 'xml')
        if (xml) {
          var encodedData = encodeURIComponent(xml);
          var link = document.createElement("a");
          link.setAttribute("download", "diagram.bpmn");
          link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
          link.click();
        } else {
          console.log("xml is null");
        }
      },
      inputFile() {
        console.log(this.$refs.activitiDesignVue.handleData)
      },
      downloadBpmn() {
        this.$refs.activitiDesignVue.saveXML(this)
      }
    },
  };
</script>

<style scoped>
  /* line 89, styles/app.less */
  .saveButton {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .setFile {
    position: fixed;
    bottom: 20px;
    right: 280px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
</style>
